<template>
    <div class="w-full h-full flex bg-pink-50 overflow-y-scroll">
        <div class="w-2/3 m-auto bg-white h-full rounded-2xl mt-10">
            <div class="flex rounded-3xl max-h-96 ">
                <div class="flex-1 rounded-3xl  h-full ">
                    <img class="rounded-3xl max-h-96 w-full h-full " :src="data.pics">
                </div>
                <div class="flex-1 overflow-y-scroll max-h-96  ">
                    <div class="text-left ml-5 pt-5">
                        <span class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">
                            {{ data.name }}
                        </span>
                        <br>
                        <div class="mt-4 grid gap-3 grid-cols-2">
                            <div>
                                <span class="text-sm font-bold tracking-tight text-gray-900 dark:text-white">评分：</span>
                                <span
                                    class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                    {{ data.rating }}
                                </span>
                            </div>
                            <div>
                                <span class="text-sm font-bold tracking-tight text-gray-900 dark:text-white">时间：</span>
                                <span
                                    class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                    {{ dayjs(data.created_date).format('YYYY-MM-DD hh:mm:ss') }}
                                </span>
                            </div>
                            <div>
                                <span class="text-sm font-bold tracking-tight text-gray-900 dark:text-white">作者:
                                </span>
                                <span
                                    class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                    {{ data.username }}
                                </span>
                            </div>
                            <div>
                                <span class="text-sm font-bold tracking-tight text-gray-900 dark:text-white">地点:
                                </span>
                                <span
                                    class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300">
                                    {{ data.location }}
                                </span>
                            </div>

                        </div>
                        <div class="mt-3 pt-3">
                            <span class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">原料</span>
                            <p class="mt-1 mb-3 font-normal text-gray-700 dark:text-gray-400">
                                {{ data.ingredient }}
                            </p>
                        </div>
                        <div class="pt-3">
                            <span class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">简介</span>
                            <p class="mt-1 float-left mb-3  font-normal text-gray-700 dark:text-gray-400">
                                {{ data.bio }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <q-separator class="m-5" />
            <div class="m-auto flex">
                <div class="flex-1">
                    <div class="p-5 mr-4 ml-4 border border-slate-200 shadow-sm">
                        <q-editor placeholder="不超过30个字" v-model="newComment" min-height="10rem" />
                        <q-btn class="mt-5 bg-blue-600 hover:bg-blue-800 text-white" label="发表评论" @click="() => { addNew() }" />
                    </div>
                </div>
                <div class=" flex-1">
                    <div class=" shadow-sm mr-4 ml-4 border border-slate-200">
                        <div class="text-2xl">
                            评论区
                        </div>
                        <q-scroll-area class="mt-5 overflow-y-scroll" style="height: 15rem;">
                            <div v-for="item in commnets" :key="item"
                                class="overflow-x-hidden m-4 p-5 min-h-20 shadow-md hover:shadow-lg ">
                                <div class="">
                                    <div class="h-full w-full p-4">
                                        <div>
                                            {{ item.username }}
                                        </div>
                                        <div class="pl-10 overflow-x-hidden" v-html="item.comment">
                                        </div>
                                    </div>
                                </div>

                            </div>

                        </q-scroll-area>
                    </div>

                </div>
            </div>
        </div>
        <div class="fixed top-10 right-10">

            <q-btn fab icon="star" color="blue" @click="() => { addToCollections() }" />
        </div>

    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { useQuasar } from 'quasar';
import { addOne, getOne } from 'src/boot/coments';
import { addOne as addCollection } from 'src/boot/collections';
const $q = useQuasar()
import { ref } from 'vue';
import dayjs from 'dayjs'
const route = useRoute();
let data = ref(route.query);
let newComment = ref('');
let username = localStorage.getItem('username')
let user_id = localStorage.getItem('user_id')
let token = localStorage.getItem('token')
let commnets = ref([])
getOne({ blog_id: route.query.id }).then(res => {
    let data = res.data;
    commnets.value = data.data
})

const addNew = () => {
    if (token === null) {
        $q.notify({
            message: '未登录',
            type: 'negative',
            position: 'top'
        })
        return
    }
    addOne({ username: username, user_id: user_id, comment: newComment.value, blog_id: route.query.id }).then(res => {
        let data = res.data;
        if (data.code === 200) {
            $q.notify({
                message: 'success',
                type: 'positive',
                position: 'top'
            })
            return
        }
    })
}

const addToCollections = () => {
    addCollection({ user_id: user_id, blog_id: route.query.id }).then(res => {
        let data = res.data
        if (data.code === 200) {
            $q.notify({
                message: 'success',
                type: 'positive',
                position: 'top'
            })
        }
        else {
            $q.notify({
                message: 'fail',
                type: 'negative',
                position: 'top'
            })
        }
    })
}

</script>